<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="shortcut icon" href="favicon.ico"> -->
    <link rel="stylesheet" href="./common/reset.css">

    <link rel="stylesheet" href="./css/common1.css">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./css/slider.css">
    <!-- <link rel="stylesheet" href="./css/product.css"> -->
    <link rel="stylesheet" href="./css/04-goodlook.css">
    <link rel="stylesheet" type="text/css" href="css/magnifier.css">
    <link rel="stylesheet" href="./css/shopcar.css">
    </script>
</head>

<body>
    <!-- 导航栏开始 -->


    <header>
        <div class="top-all">
            <div class="top wrapper">
                <img src="./images/goodlook.png">
                <div class="top-left">
                    <span>legochina.cn</span>
                    <span>欢迎光临<a href="#">乐购</a>，请 登陆\<a href="#">注册</a></span>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航 栏结束 -->
    <!-- 导航栏开始 -->
    <nav>
        <div class="navs wrapper">
            <form action="#">
                <input type="text" placeholder="创意文具">
                <button></button>
            </form>
            <section>
                <div>
                    <span></span>
                    购物车 3
                </div>
                <div>我的订单</div>
            </section>
            <div class="clear"></div>
            <ul class="navi">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">户外运动</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器械</a></li>
            </ul>
        </div>

    </nav>
    <!-- 导航栏结束 -->



    <!-- 商品详细信息开始 -->
    <div class="particular">
        <div class="par-inner wrapper">
            <div class="inr-tit">
                <span>图书</span> > &nbsp;小说 &nbsp;> &nbsp;情感/家庭/婚姻 &nbsp;> &nbsp;博集天卷&nbsp; > &nbsp;她和他&nbsp;
            </div>
            <div class="inr-main">
                <div class="inr-main-left fl ">
                    <div class="magnifier" id="magnifier1">
                        <div class="magnifier-container">
                            <div class="images-cover"></div>
                            <!--当前图片显示容器-->
                            <div class="move-view"></div>
                            <!--跟随鼠标移动的盒子-->
                        </div>
                        <div class="magnifier-assembly">
                            <div class="magnifier-btn">
                                <span class="magnifier-btn-left">&lt;</span>
                                <span class="magnifier-btn-right">&gt;</span>
                            </div>
                            <!--按钮组-->
                            <div class="magnifier-line">
                                <ul class="clearfix animation03">
                                    <li>
                                        <div class="small-img">
                                            <img src="images/000.png" />
                                        </div>
                                    </li>

                                </ul>
                            </div>
                            <!--缩略图-->
                        </div>
                        <div class="magnifier-view"></div>
                        <!--经过放大的图片显示容器-->
                    </div>

                    <p class="bh">商品编号：11950959</p>
                </div>

                <div class="inr-main-right fr">
                    <div class="imr-top">
                        <h3>她和他</h3>
                        <p>《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                        <div>[法] 马克·李维 著；杨亦雨 译</div>
                    </div>
                    <div class="imr-cen">
                        <div class="imr-cen-left pzb fl block">
                            <article class="jiag">乐 购 价：<span>￥26.20</span> &nbsp; [6.9折]&nbsp; &nbsp; [定价&nbsp;
                                ：<i>￥38.00</i>]&nbsp; (降价通知)</article>
                            <article class="chux">促销信息：&nbsp; <span>满减&nbsp; 每满150.00元，&nbsp; 可减50.00元现金</span> &nbsp;
                                详情 >></article>
                            <article class="lingq">领 券：<span>100-6</span><span>100-6</span></article>
                        </div>
                        <div class="imr-cen-left jzb fl">
                            <article class="jiag">乐 购 价：<span>￥26.20</span> &nbsp; [6.9折]&nbsp; &nbsp; [定价&nbsp;
                                ：<i>￥38.00</i>]&nbsp; (降价通知)</article>
                            <article class="chux">促销信息：&nbsp; <span>满减&nbsp; 每满150.00元，&nbsp; 可减50.00元现金</span> &nbsp;
                                详情 >></article>
                            <article class="lingq">领 券：<span>100-6</span><span>100-6</span></article>
                        </div>
                        <div class="imr-cen-right fr">
                            <p>累计评价</p>
                            <div>9999</div>
                        </div>
                    </div>
                    <div class="imr-kind">
                        种类选择 : <span>平装版</span><span class="gougou">精装版</span>
                    </div>
                    <div class="joincar clearfix">
                        <div class="shuliang fl">
                            <input class="shuliang-l fl" type="text" value="1">
                            <div class="shuliang-r fl">
                                <div class="add">+</div>
                                <div class="reduce">-</div>
                            </div>
                        </div>
                        <div class=" fl jr f60">加入购物车</div>
                    </div>
                    <p>温馨提示：支持7天无理由退货</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品详细信息结束 -->

    <!-- 人气单品开始 -->
    <div class="youlike wrapper">
        <h2><span class="f60">人气单品</span></h2>
        <ul class="clearfix">
            <li class="f2">
                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                <div class="bg-c"><span>8折</span></div>
                <div class="li-bottom">
                    <p>白夜行 东野圭吾</p>
                    <div class="pingf">推荐:<span></span>
                    </div>
                    <div class="history">
                        ￥:38 <span>￥:58</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                <div class="bg-navs wrapper c"><span>8折</span></div>
                <div class="li-bottom">
                    <p>白夜行 东野圭吾</p>
                    <div class="pingf">推荐:<span></span>
                    </div>
                    <div class="history">
                        ￥:38 <span>￥:58</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                <div class="bg-c"><span>8折</span></div>
                <div class="li-bottom">
                    <p>白夜行 东野圭吾</p>
                    <div class="pingf">推荐:<span></span>
                    </div>
                    <div class="history">
                        ￥:38 <span>￥:58</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                <div class="bg-c"><span>8折</span></div>
                <div class="li-bottom">
                    <p>白夜行 东野圭吾</p>
                    <div class="pingf">推荐:<span></span>
                    </div>
                    <div class="history">
                        ￥:38 <span>￥:58</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                <div class="bg-c"><span>8折</span></div>
                <div class="li-bottom">
                    <p>白夜行 东野圭吾</p>
                    <div class="pingf">推荐:<span></span>
                    </div>
                    <div class="history">
                        ￥:38 <span>￥:58</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 人气单品结束 -->

    <div class="seeagin wrapper">
        <div class="seeagin-left fl">
            <h3>看了又看</h3>
            <ul class="clearfix">

                <script>
                    for (var i = 0; i < 7; i++) {
                        document.write(`
                            <li>
                                <img src="./images/素材图片/书籍/22935553-1_l.jpg">
                                <div class="bg-c"><span>8折</span></div>
                                <div class="li-bottom">
                                    <p>白夜行 东野圭吾</p>
                                    <div class="pingf">推荐:<span></span>
                                    </div>
                                    <div class="history">
                                        ￥:38 <span>￥:58</span>
                                    </div>
                                </div>
                            </li>`)
                    }
                </script>
            </ul>
        </div>
        <div class="seeagin-right fr">
            <div class="seeagin-right-top bbs">
                <span class="f60">商品介绍</span>
                <span class="">评价（9999）</span>
            </div>
            <div class="seeagin-right-bottom">
                <div class="srb-inner block srb1">
                    <img src="./images/素材图片/书籍/商品介绍.png" alt="">
                </div>
                <div class="srb-inner  srb2">
                    <div class="evaluation">
                        <div class="evaluation-left fl">
                            <h4>98%</h4>
                            <p>好评度</p>
                        </div>
                        <div class="evaluation-center fl">
                            <div>好评(98%)<span></span> </div>
                            <div>中评(3%)&nbsp;&nbsp;<span></span> </div>
                            <div>差评(0%)&nbsp;&nbsp;<span></span> </div>
                        </div>
                        <ul class="evaluation-right fr">
                            <li>1.洲**子&emsp;&emsp;&emsp; +0 </li>
                            <li>2.洲**子 &emsp;&emsp;&emsp;+0 </li>
                            <li>3.洲**子&emsp;&emsp;&emsp; +10 </li>
                            <li>4.洲**子 &emsp;&emsp;&emsp;+10 </li>
                        </ul>
                    </div>

                    <div class="all-e">
                        <ul>
                            <li>全部评价（9999）</li>
                            <li>好评（888）</li>
                            <li>中评（888）</li>
                            <li>差评（888）</li>
                        </ul>
                    </div>
                    <ul class="pinglun">
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                <li>
                                <div class="pinglun-left fl">
                                        <img src="./images/X.png" alt="">
                                        <p>下单后5天评论</p>
                                        <p>2016-08-11</p>
                                </div>
                               <div class="pinglun-center fl">
                                     书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                                     键是价格真给力
                               </div>
                               <div class="pinglun-right fr">
                                        <div class="pinglun-rt">
                                    <span></span>洲**子
                                        </div>
                                        <p>金牌会员</p>
                                     <article>来自iPhone客户端</p>
                                </div>
                        </li>`)
                            }
                        </script>
                    </ul>
                    <div class="page clearfix">
                        <ul class="fr">
                            <li class="removeborder">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li class="int">...</li>
                            <li>下一页</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!-- 最后的8本书的广告开始 -->
    <div class="last8 wrapper">

        <img src="./images/banner2.png" alt="">

    </div>
    <!-- 最后的8本书的广告结束 -->

    <!-- 页脚 开始 -->
    <footer id="footer">
        <div class="ft-top" id="ft-top">
            <ul class="sever wrapper-fotter">
                <li><img src="./images/222_11.png"></li>
                <li><img src="./images/222_13.png"></li>
                <li><img src="./images/222_15.png"></li>
                <li><img src="./images/222_17.png"></li>
            </ul>
        </div>
        <div class="callme wrapper-fotter clearfix">
            <ul class="ul-1">
                <li>
                    <h3>购物指南</h3>
                    <ul class="ul-2">
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">发票制度</a></li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">会员优惠</a></li>
                    </ul>
                </li>
                <li>
                    <h3>支付方式</h3>
                    <ul class="ul-2">
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">网上支付</a></li>
                        <li><a href="#">礼品卡支付</a></li>
                        <li><a href="#">银行转账</a></li>
                    </ul>
                </li>
                <li>
                    <h3>订单服务</h3>
                    <ul class="ul-2">
                        <li><a href="#">订单配送查询</a></li>
                        <li><a href="#">订单状态说明</a></li>
                        <li><a href="#">自助取消订单</a></li>
                        <li><a href="#">自助修改订单</a></li>
                    </ul>
                </li>
                <li>
                    <h3>退换货</h3>
                    <ul class="ul-2">
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">自助申请退换货</a></li>
                        <li><a href="#">退换货进度查询</a></li>
                        <li><a href="#">退款方式和时间</a></li>
                    </ul>
                </li>
                <li>
                    <h3>商家服务</h3>
                    <ul class="ul-2">
                        <li><a href="#">商家中心</a></li>
                        <li><a href="#">运营服务</a></li>
                        <li><a href="#">加入尾品汇</a></li>
                        <li></li>
                    </ul>
                </li>
            </ul>
            <img class="bottom-logo" src="./images/logo_00.png">
        </div>
        <div class="ft-bottom wrapper-fotter">
            <ul>
                <li>公司简介</li>
                <li>Investor Relations</li>
                <li>网站联盟</li>
                <li>乐购招商</li>
                <li>机构销售</li>
                <li>手机乐购</li>
                <li>官方Blog</li>
                <li>热词搜索</li>
            </ul>
        </div>
        <div class="last wrapper-fotter">
            <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
    </footer>
    <!-- 页脚 结束 -->
    <!-- <script src="./lib/jquery.js"> </script>
    <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
    <script>
        $('.seeagin-right-top>span').on('click', function () {
            let index = $(this).index()
            $(this).addClass('f60').siblings().removeClass('f60')
            $('.seeagin-right-bottom .srb-inner').eq(index).addClass('block').siblings().removeClass('block')
        })

        $('.add').click(function () {
            let val = $('.shuliang-l').val()
            val++
            $('.shuliang-l').val(val)
        })
        $('.reduce').click(function () {
            let val = $('.shuliang-l').val()
            val--
            if ($('.shuliang-l').val() > 1) {

                $('.shuliang-l').val(val)
            }
        })


        $(function () {
            var options2 =
            {
                zoomWidth: 250,
                zoomHeight: 250,
                zoomType: 'reverse'
            }
            $(".jqzoom").jqzoom(options2);
        }); -->

    <!-- <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> -->
    <script src="./lib/jquery.js"></script>
    <script type="text/javascript" src="js/magnifier.js"></script>
    <script type="text/javascript">
        $('.seeagin-right-top>span').on('click', function () {
            let index = $(this).index()
            $(this).addClass('f60').siblings().removeClass('f60')
            $('.seeagin-right-bottom .srb-inner').eq(index).addClass('block').siblings().removeClass('block')
        })

        $('.add').click(function () {
            let val = $('.shuliang-l').val()
            val++
            $('.shuliang-l').val(val)
        })
        $('.reduce').click(function () {
            let val = $('.shuliang-l').val()
            val--
            if ($('.shuliang-l').val() > 1) {

                $('.shuliang-l').val(val)
            }
        })
        $(function () {

            var magnifierConfig = {
                magnifier: "#magnifier1",//最外层的大容器
                width: 320,//承载容器宽
                height: 320,//承载容器高
                moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
                zoom: 5//缩放比例
            };
            var _magnifier = magnifier(magnifierConfig);

            /*magnifier的内置函数调用*/
            /*
                //设置magnifier函数的index属性
                _magnifier.setIndex(1);
        
                //重新载入主图,根据magnifier函数的index属性
                _magnifier.eqImg();
            */
        });
    </script>
</body>

</html>